<template>
  <div class="evaluate_item">
    <div style="background:#ffffff;padding: 20rpx;">
      <Card style="padding-top: 300rpx" :bordered="false">
        <i-tabs :current="current" @change="handleChange">
          <i-tab key="tab1" title="英语"></i-tab>
          <i-tab key="tab2" title="译文"></i-tab>
        </i-tabs>

        <div v-if="current === 'tab1'" class="english_page">
          <p class="text_item">句子： {{ sentence.content}}</p>
        </div>
      </Card>
    </div>

    <div style="position: fixed; bottom: 0; width: 100%;">
      <div class="icon_item" style="background:#ffffff; shadow: true;">
        <div style="display: flex; flex-direction: row; text-align: center; bottom: 0;">
          <div style="display: flex; flex-direction: column; text-align: center; width: 33.3%" @tap="playText">
            <icon v-if="isPlay === false" class="iconfont icon-play" style="font-size: 80rpx; color:#2ebf76; height: 80px; margin-top: 18px"></icon>
            <icon v-else class="iconfont icon-suspend_icon" style="font-size: 80rpx; color:#e20000; height: 80px; margin-top: 18px"></icon>
          </div>

          <div v-if="recSta === false" style="display: flex; flex-direction: column; text-align: center; width: 33.3%" @tap="startRec">
            <icon class="iconfont icon-huatong" style="font-size: 100rpx; color:#2ebf76"></icon>
          </div>

          <div v-else="recSta" style="display: flex; flex-direction: column; text-align: center; width: 33.3%" @tap="stopRec">
            <icon class="iconfont icon-huatong" style="font-size: 100rpx; color:#e20000"></icon>
          </div>

          <div style="display: flex; flex-direction: column; text-align: center; width: 33.3%" @tap="toScore">
            <icon class="iconfont icon-jilu" style="font-size: 80rpx; color:#2ebf76; height: 80px; margin-top: 18px"></icon>
          </div>
        </div>
      </div>

      <div class="icon_item" style="background:#ffffff;padding-bottom: 20rpx; shadow: true; z-index: 10; position: absolute; top: 71%; width: 100%">
        <div style="display: flex; flex-direction: row; text-align: center;">
          <div style="display: flex; flex-direction: column; text-align: center; width: 33.3%">
            <p v-if="isplay === false" class="icon_name">听原文</p>
            <p v-else class="icon_name">听原文</p>
          </div>
          <div style="display: flex; flex-direction: column; text-align: center; width: 33.3%">
            <p class="icon_name">跟读</p>
          </div>
          <div style="display: flex; flex-direction: column; text-align: center; width: 33.3%">
            <p class="icon_name">测评</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>


<script>
  import {mapState} from 'vuex'
  export default {
    data () {
      return {
        scoreArr: [], // 存放测评的分数详情
        URL: this.GLOBAL.apiUrl, // 服务器地址
        innerAudioContext: null, // 微信音频播放组件初始值
        isPlay: false, // 微信音频播放组件初始值
        sentence: [], // 存放句子信息
        current: 'tab1', // 选项卡初始值
        recorderManager: '', // 微信录音机调用管理初始值
        recSta: false, // 微信录音机管理初始值
        tempFilePath: '' // 微信录音文件临时路径
      }
    },
    computed: {
      ...mapState([
        'indexArr',
        'userId',
        'sentenceArrAcronym',
        'sentenceArrTime'
      ])
    },
    beforeMount () {
      // 挂载前获取句子信息
      wx.request({
        url: this.URL + 'sentence/getSentenceBySentenceId',
        method: 'POST',
        data: {
          sentenceId: this.$mp.query.sid
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: res => {
          this.sentence = res.data.data
        }
      })
    },
    methods: {
      playText () {
        // 从服务器获取音频文件并播放
        let _that = this
        wx.request({
          url: _that.URL + 'sentence/getStandardAudio',
          method: 'POST',
          data: {
            sentenceId: _that.sentence.id
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            this.innerAudioContext = wx.createInnerAudioContext()
            this.innerAudioContext.src = res.data.data
            this.innerAudioContext.play()
            this.innerAudioContext.onPlay((res) => {
              console.log(res)
            })
            this.innerAudioContext.onError((res) => {
              console.log(res.errMsg)
              console.log(res.errCode)
            })
            this.innerAudioContext.onCanplay((res) => {
              this.isPlay = true
            })
            this.innerAudioContext.onEnded((res) => {
              this.isPlay = false
            })
          }
        })
      },
      handleChange (detail) {
        this.current = detail.target.key
      },
      toScore () {
        // 跳转到分数详情页
        wx.navigateTo({
          url: '/pages/score/main'
        })
      },
      startRec () {
        // 开始录音
        this.recorderManager = wx.getRecorderManager()
        const options = {
          duration: 60000,
          sampleRate: 16000,
          numberOfChannels: 1,
          encodeBitRate: 24000,
          format: 'mp3', // 保存为mp3格式文件
          frameSize: 50
        }
        this.recorderManager.start(options)
        this.recorderManager.onStart(() => {
          console.log('recorder start')
        })
        this.recSta = true
      },
      stopRec () {
        // 停止录音并将录音文件上传到服务器
        this.recorderManager.stop()
        this.recorderManager.onStop((res) => {
          this.tempFilePath = res.tempFilePath
          let _that = this
          wx.uploadFile({
            url: _that.URL + 'user/sendToUser',
            filePath: _that.tempFilePath,
            name: 'file',
            header: {
              'content-type': 'multipart/form-data'
            },
            formData: {
              'sentenceId': _that.sentence.id,
              'userId': _that.userId
            },
            success: res => {
              let scoreArr = JSON.parse(res.data)
              _that.$store.dispatch('getScoreArr', scoreArr.data)
              _that.scoreArr = scoreArr.data
            }
          })
        })
        this.recSta = false
      }
    }
  }
</script>

<style scoped>

  .text_item {
    margin-top: 50rpx;
    margin-left: 20rpx;
  }
  .icon_name {
    color: grey;
  }
</style>
